<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-多重边框</title>
  <style>
    .box1{
      width: 100px;
      height: 100px;
      background: deeppink;
      box-shadow: 0 0 0 10px #aaaaaa,/*注意，由于是投影属性，所以下一次的宽度一定要比上次的宽度大*/
                  0 0 0 20px #999999,
                  0 0 0 30px #666666,
                  0 0 0 10px #cccccc inset;/*此时*/
      /*
      使用 box-shadow
        此时我们的多重边框就已经有了
          但是由于我们加的是投影属性，所以又要考虑一些问题
          1.我们所使用的投影属性，不会触发鼠标悬停事件和单击事件
          2.投影和边框的行为完全不一致，他不会影响布局，所以，我们有必要给盒子加外边距或者内边距
          来保证页面的布局
          3.如果想要多重边框，又想让边框拥有单击事件或者悬停事件，我们就可以让投影属性向内发光 inset
          但是我们也要确保内边距腾出足够的空隙
       */
      margin: 50px auto;

      border-radius: 50%;
    }
    .box1:hover{
      background-color: whitesmoke;
    }

    /*--------------------------------------------------------*/
    .box2{
      width: 100px;
      height: 100px;
      background: pink;
      border: 10px solid red;
      outline: 10px solid green;
      /*
      outline方案
        在某些情况下，你可能只需要两层边框，那么我们就可以先使用 border 再使用 outline
        注意，outline也不会触发鼠标悬停事件和单击事件
      */
    }
    .box2:hover{
      background: #FFFFFF;
    }


  </style>
</head>
<body>
  <h1>使用box-shadow</h1>
  <div class="box1"></div>
  <h1>使用out-line</h1>
  <div class="box2"></div>

  <script>
    let divs=document.querySelector(".box1");
    divs.addEventListener('click',()=>{
      console.log(1)
    })

    let divs2=document.querySelector(".box2");
    divs2.addEventListener('click',()=>{
      console.log(2)
    })
  </script>
</body>
</html>